<template>
  <view w-full box-border px-40rpx flex flex-col items-center>
    <image mode="aspectFit" h-120rpx mb-40rpx mt-100rpx :src="result.logo"></image>
    <view mb-140rpx text-32rpx>{{ result.showName || config.name }}</view>
    <view
      h-110rpx
      w-full
      flex
      items-center
      text-28rpx
      font-500
      text="#000"
      line-clamp-1
      style="border-top: 1px solid #eee; border-bottom: 1px solid #eee"
      @click="openApp">
      联系地址：{{ result.address }}
    </view>
    <view
      w-full
      h-110rpx
      mb-60rpx
      flex
      justify-between
      items-center
      text-28rpx
      font-500
      text="#000"
      style="border-bottom: 1px solid #eee"
      @click="callPhone">
      <text>联系电话：{{ result.phone }}</text>
      <image w-35rpx h-35rpx src="/pages/mine/static/phone.png"></image>
    </view>
    <map
      id="map"
      w-670rpx
      h-500rpx
      rounded-20rpx
      :longitude="mapInfo.longitude"
      :latitude="mapInfo.latitude"
      :markers="markers"
      :scale="14"
      @click="openApp"
      @markertap.stop="openApp"></map>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { getAboutUsDetail } from '@/api/aboutUs'
import config from '@/config/config'
const mapInfo = ref<any>({})
const markers = ref<any>([])
let mapContext: any
const result = ref<any>({})
function openApp() {
  console.log('要跳转地图导航', mapContext, mapInfo.value, result.value)
  mapContext.openMapApp({
    longitude: parseFloat(mapInfo.value.longitude),
    latitude: parseFloat(mapInfo.value.latitude),
    destination: result.value.address
  })
}
function callPhone() {
  uni.makePhoneCall({
    phoneNumber: result.value.phone
  })
}
onMounted(() => {})
onLoad(async (options: any) => {
  const response = await getAboutUsDetail(options.code)
  result.value = response.data.result
  const lonlat = result.value.lonLat.split(',') || ['', '']
  mapInfo.value = {
    longitude: lonlat[0],
    latitude: lonlat[1]
  }
  markers.value = [
    {
      id: 1,
      longitude: lonlat[0],
      latitude: lonlat[1],
      iconPath: '/pages/mine/static/position_red.png',
      width: 34,
      height: 34
    }
  ]
  mapContext = uni.createMapContext('map')
})
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style scoped lang="scss"></style>
